<template>
  <div class="answerRecord">
    <div class="back">
      <button class="back_icon" @click="deleteWebView"></button>
    </div>
    <div class="topBg">
      <img src="../assets/bg_rankList_top.jpg" alt="">
    </div>
    <div class="content">
      <ul>
        <li class="answerList" v-for="(item, index) in myAnswers" :key="index">
          <div class="answerListTop">
            <div class="index">第{{index + 1}}题</div>
            <img v-if="item.myAnswer !== item.correctAnswer" src="../assets/answer_wrong.png" alt="">
            <img v-else src="../assets/answer_correct.png" alt="">
          </div>
          <div class="answerDetail">
            <p class="topic">{{item.question}}</p>
            <div class="myAnswerWrap">
              <div class="myAnswer">
                <p class="myAnswerborder">{{item.myAnswer}}</p>
                <p class="text">我的答案</p>
              </div>
              <div class="correctAnswer">
                <p class="correctAnswerBorder">{{item.correctAnswer}}</p>
                <p class="text">正确答案</p>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <p style="text-align:center;display:block;font-size: 0.3rem;color:#aa8a8a;padding-top:0.2rem;padding-bottom:1.4rem;">没有更多题目了.....</p>
      <div class="btnWrap">
        <button class="btn_oneMoreTime" @click="oneMoreTime"></button>
        <button class="btn_showoff" @click="showoffFN"></button>
      </div>
    </div>
    <div class="showoff" v-if="showoff">
      <div class="showoffContent">
        <div class="showoffBgWrap">
          <div class="btnX">
            <img src="../assets/btn_X.png" alt="" @click="btnX2">
          </div>
          <div class="bg_showoff_top">
            <p>分享得次数</p>
          </div>
          <div class="bg_showoff_bottom">
            <div style="height:0.6rem;"></div>
            <p style="color:#7a585c;font-size: 0.25rem;width:80%;">
              <ul>
                <li>1.每日首次分享可增加当日答题次数 2 次</li>
                <li>2.每邀请一位非Etalk学员参加活动,可增加 1 次基础挑战机会</li>
              </ul>
            </p>
            <div class="shareBtnWrap">
              <button v-if="isWechat===false" class="btn_shareFrineds" @click="getQart(0)"></button>
              <button v-if="isWechat===false" class="btn_shareFrinedsCircle" @click="getQart(1)"></button>
            </div>
            <span style="font-size:0.26rem;text-indent: 0.2rem;display: block;color:#7A585C;">已成功邀请好友:</span>
            <div class="myFriendsList">
              <div class="myFrinendsWrap">
                <ul>
                  <li v-for="(item, index) of myFriendList" :key="index">
                    <div class="listItem">
                      <myFriendsItem :player="item" :index="index"></myFriendsItem>
                    </div>
                  </li>
                  <li v-if="myFriendList.length===0" v-for="item in 3" :key="item">
                    <div class="unyaoqing">
                      <div class="unyaoqingAvatarItem"></div>
                      <span>待邀请</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="showDom" id="qrcode" ref="qrimg" ></div>
      <canvas v-show="showDom" ref="finalyc" width="375" height="667"></canvas>
    </div>
    <div class="weChatBg" v-if="weChatShowOff" @click="weChatShowOff=false">
      <img v-if="baseInfo.isShare === 1" src="../assets/weChatBg.png" alt="">
      <img v-else-if="baseInfo.isShare === 0" src="../assets/weChatFirstShare.png" alt="">
    </div>
  </div>
</template>

<script>
import {wxshare} from '../util/WXShare'
import myFriendsItem from '../components/myFriendsItem'
import {mapGetters} from 'vuex'
import {checkMyselfRnak, lessChance, getMyFriends, checkIfShare, addTimesByShare, getUserInfo} from '../request/question'
import {Toast} from 'mint-ui'
import AppBradge from '../util/appBradge'
import QRCode from 'qrcodejs2'
export default {
  name: 'answerRecord',
  data () {
    return {
      showoff: false,
      isWechat: false,
      myFriendList: [],
      showDom: false,
      imgBase64: '',
      weChatShowOff: false
    }
  },
  components: {
    myFriendsItem
  },
  computed: {
    ...mapGetters([
      'token',
      'baseInfo',
      'correctNumThis',
      'myAnswers'
    ])
  },
  created () {
    if (!this.token) {
      this.$router.push({name: 'SignUp', query: {fresh: 'yes'}})
    }
  },
  mounted () {
    let clientHeight = document.body.clientHeight
    let screenHeight = window.screen.height
    if (clientHeight < screenHeight) {
      this.isWechat = true
    }
    wxshare('超级词场', '限时一分钟,你会比我强?', 'https://metalk.etalk365.com/superwordfile/#/signup?t=' + this.token + '&source=97', 'https://hnres.etalk365.com/app/image/activity_pic/suoluetu.jpg', this.successShare)
  },
  methods: {
    successShare () {
      checkIfShare({tokenString: this.token}).then(data => {
        if (data.isShare === 0) {
          addTimesByShare({tokenString: this.token}).then(data => {
            if (data > 0) {
              getUserInfo({ tokenString: this.token }).then(data => {
                this.$store.dispatch('saveInfo', data)
              })
            }
          })
        }
      })
    },
    deleteWebView () {
      this.$router.push({name: 'RankList'})
      // this.$router.back()
      // history.go(-1)
    },
    showoffFN () {
      if (this.isWechat) {
        this.weChatShowOff = true
      } else {
        this.showoff = true
      }
      getMyFriends({tokenString: this.token}).then(data => {
        if (Number(data) === 0) {
          this.showoff = true
        } else if (data.recommendedInformation.length > 0) {
          this.myFriendList = []
          data.recommendedInformation.map((item1, index) => {
            data.recommendedUser.map((item2, index) => {
              if (item1.uid === item2.personId) {
                this.myFriendList.push(Object.assign(item1, item2))
              }
            })
          })
          this.showoff = true
        }
      })
    },
    btnX2 () {
      this.showoff = false
    },
    getQart (shareType) {
      /**
        auther: cmyh
        创建二维码
        之所以生成的二维码密度大，有俩点原因：
        内容过多。
        选择了高比例的错误修正。
        容错级别，可设置为：
        QRCode.CorrectLevel.L
        QRCode.CorrectLevel.M
        QRCode.CorrectLevel.Q
        QRCode.CorrectLevel.H
      **/
      if (shareType === 0) {
        this.$store.dispatch('zhugeWxshareFriendsAnswer', {})
      } else {
        this.$store.dispatch('zhugeWxshareFriendsQuanAnswer', {})
      }
      if (this.$data.imgBase64 !== '') {
        this.shareMethod(shareType)
      } else {
        let qrcode = new QRCode(document.getElementById('qrcode'), {
          width: 100, // 设置宽高
          height: 100,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.M
        })
        let shareUrl = 'https://metalk.etalk365.com/superwordfile/#/signup?t=' + this.token + '&source=97'
        qrcode.makeCode(shareUrl)
        let qrimg = this.$refs.qrimg.children[1]
        let bg = new Image()
        bg.src = require('../assets/showoffBg.jpg') // 'https://hnres.etalk365.com/app/image/activity_pic/invitation.jpg'
        let codePromise = new Promise((resolve, reject) => {
          qrimg.onload = () => {
            // this.composeQr(qrimg)
            resolve(1)
          }
          qrimg.onerror = () => {
            resolve(0)
          }
        })
        let bgPromise = new Promise((resolve, reject) => {
          bg.onload = () => {
            resolve(1)
          }
          bg.onerror = () => {
            resolve(0)
          }
        })
        Promise.all([codePromise, bgPromise]).then(data => {
          if (Number(data[0]) === 1) {
            this.composeQr(qrimg, bg, shareType)
          } else {
            this.composeQr(qrimg, bg, shareType)
          }
        })
      }
      // this.imgPreloadingAct()
    },
    composeQr (img, bg, shareType) {
      // 合成最终专属二维码图片
      try {
        let c = this.$refs.finalyc
        let ctx = c.getContext('2d')
        // let imgbg = this.$refs.qrbg
        ctx.drawImage(bg, 0, 0)
        ctx.fillStyle = '#fff'
        // ctx.fillRect(255, 1044, 240, 240)
        ctx.drawImage(img, 247, 532)
        ctx.save()
        ctx.font = 'normal normal bold 18px Microsoft Yahei' // '36px Microsoft Yahei'
        ctx.fillStyle = 'white'
        ctx.fillText('我在Etalk英语 "超级词场" 活动中', 23, 100)
        ctx.font = 'normal normal bold 30px Microsoft Yahei'
        // ctx.font = '60px Microsoft Yahei'
        ctx.fillStyle = 'white'
        ctx.fillText('本轮得分 ' + this.correctNumThis, 23, 140)
        checkMyselfRnak({tokenString: this.token, type: 0}).then(data => {
          if (Number(data.rankNumber) !== 0) {
            ctx.fillText('今日排名第 ' + data.rankNumber, 23, 182)
            this.$data.imgBase64 = c.toDataURL('image/jpeg')
            this.shareMethod(shareType)
          } else {
            ctx.fillText('今日未上榜 ', 23, 147)
            this.$data.imgBase64 = c.toDataURL('image/jpeg')
            this.shareMethod(shareType)
          }
        })
      } catch (e) {
        console.log(e)
      }
    },
    shareMethod (shareType) {
      AppBradge.wxshare(shareType, this.$data.imgBase64).then((type) => {
        let msg = ''
        switch (type * 1) {
          case 0:
            msg = '分享成功'
            break
          case -1:
            msg = '发送失败'
            break
          case -2:
            msg = '您取消了'
            break
          case -3:
            msg = '发送失败'
            break
          case -4:
            msg = '授权失败'
            break
          case -5:
            msg = '微信不支持'
            break
        }
        if (type * 1 === 0) {
          checkIfShare({tokenString: this.token}).then(data => {
            if (data.isShare === 0) {
              addTimesByShare({tokenString: this.token}).then(data => {
                if (data > 0) {
                  msg = '分享成功,当日增加两次答题机会'
                  getUserInfo({ tokenString: this.token }).then(data => {
                    this.$store.dispatch('saveInfo', data)
                    this.noAnswerTimes = false
                    Toast({
                      message: msg,
                      duration: 1500
                    })
                  })
                }
              })
            } else {
              Toast({
                message: msg,
                duration: 1500
              })
            }
          })
        } else {
          Toast({
            message: msg,
            duration: 1500
          })
        }
      })
    },
    oneMoreTime () {
      if (this.baseInfo.answerTimes > 0) {
        lessChance({tokenString: this.token}).then((data) => {
          this.$store.dispatch('updateChance')
          this.$store.dispatch('changeinitRankList', 1)
          this.$router.push({name: 'Question'})
        })
      } else {
        if (!this.isWechat) {
          this.showoffFN()
        } else {
          this.weChatShowOff = true
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// .answerRecord{
//   -webkit-overflow-scrolling: touch;
//   overflow: hidden;
// }
// ul{
//   -webkit-overflow-scrolling: touch;
// }
// .content{
//   -webkit-overflow-scrolling: touch;
// }
img{
  display: block;
  font-size: 0;
}
.answerList{
  background: -webkit-linear-gradient(left, #ffebd6, #ffd8e7);
  width: 90%;
  font-size: 0.4rem;
  margin: 0 auto;
  border-radius: 0.4rem;
  padding-bottom: 0.3rem;
  margin-top:0.3rem;
}
.answerListTop{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.1rem;
  img{
    width: 40%;
    height: 0.9rem;
  }
}
.index{
  width:30%;
  border:1px solid white;
  border-radius: 0rem 0.4rem 0.4rem 0;
  text-shadow: 0 1px white, 1px 0 white, -1px 0 white, 0 -1px white;
  font-size: 0.35rem;
  font-weight: 600;
  text-align: center;
  line-height: 0.5rem;
  margin-top: 0.2rem;
  color: #7a585c;
}
.answerDetail{
  text-align: center;
  width: 90%;
  margin: 0 auto;
  background: #fff;
  color: #AA898A;
  border-radius: 0.25rem;
  font-size: 0.28rem;
  margin-top: 0.12rem;
}
.myAnswerWrap{
  width: 90%;
  display: flex;
  margin: 0 auto;
  justify-content: space-around;
  font-size: 0.3rem;
}
.myAnswer,.correctAnswer{
  width:45%;
}
.myAnswerborder,.correctAnswerBorder{
  padding: 0 0.2rem;
  border-radius: 0.4rem;
  line-height: 0.5rem;
  color: #7a585c;
}
.myAnswerborder{
  background: -webkit-linear-gradient(left, #ffebd6, #ffd8e7);
}
.correctAnswerBorder{
  background: -webkit-linear-gradient(left, #ffd8e7, #ffebd6);
}
.topic{
  line-height: 0.8rem;
}
.text{
  font-size: 0.25rem;
  line-height: 0.5rem;
}
.btnWrap{
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1.2rem;
  background: url('../assets/bg_rankList_bottom.png');
  background-size: cover;
  background-repeat: no-repeat;
}
.btn_oneMoreTime{
  background: url('../assets/btn_oneMoreTime.png');
}
.btn_showoff{
  background: url('../assets/btn_showoff.png');
}
.btn_oneMoreTime,.btn_showoff{
  background-size: contain;
  background-repeat: no-repeat;
  height: 0.8rem;
  width: 2.2rem;
}
.showoff{
  .listItem{
    margin-top: 0.1rem;
    background: white;
    margin-left: 3%;
    // margin-right: 0.23rem;
    // height: 0.9rem;
    // line-height: 0.35rem;
    border-radius: 0.45rem;
    width: 94%;
    height: 100%;
    .correctNumRnak{
      margin-left: 0.2rem;
    }
  }
}
.listItem{
  // margin-top: 0.2rem;
  background: -webkit-linear-gradient(left, #ffebd6, #ffd8e7);
  margin-left: 0.23rem;
  margin-right: 0.23rem;
  // height: 0.9rem;
  line-height: 0.35rem;
  border-radius: 0.45rem;
}
.showoffContent{
  width:100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.showoffBgWrap{
  width:80%;
  margin-left: 10%;
}
.bg_showoff_bottom{
  position: relative;
  z-index:1;
  width: 94%;
  height:6.8rem;
  left:3%;
  top:-0.5rem;
  background: white;
  border-radius: 0.3rem;
  p{
    width:85%;
    margin: 0 auto;
    padding: 0.2rem;
    background: #FFE2DE;
    border-radius: 0.3rem;
    box-shadow: 0 0.1rem 0 #FFBFCD;
  }
}
.shareBtnWrap{
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-around;
  margin-top: 0.4rem;
}
.btn_shareFrineds{
  background-image: url('../assets/btn_shareFriends.png')
}
.btn_shareFrinedsCircle{
  background-image: url('../assets/btn_shareFriendCircle.png')
}
.btn_shareFrineds,
.btn_shareFrinedsCircle{
  width:45%;
  height: 0.8rem;
  background-size: contain;
  background-repeat: no-repeat;
}
.bg_showoff_top{
  position: relative;
  z-index:2;
  height: 2rem;
  width: 100%;
  background: url('../assets/bg_result_top.png');
  background-size: contain;
  background-repeat: no-repeat;
  color: white;
  font-size: 0.45rem;
  text-align: center;
  p{
    padding-top:0.9rem;
    letter-spacing: 0.1rem;
    font-weight: 600;
  }
}
.myFriendsList{
  // margin-top: 0.1rem;
  height: 2.8rem;
  overflow: scroll;
  background: -webkit-linear-gradient(left, #ffebd6, #ffd8e7);
  width: 80%;
  border-radius: 0.3rem;
  margin: 0px auto;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  span{
    display: block;
    text-indent: 0.2rem;
  }
}
.unyaoqing{
  background: white;
  height: 0.8rem;
  width: 90%;
  margin: 0 auto;
  margin-top: 0.1rem;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  .unyaoqingAvatarItem{
    width: 0.7rem;
    height: 0.7rem;
    // border:1px solid red;
    border-radius: 100%;
    margin-left: 0.5rem;
    margin-top: 0.05rem;
    background: -webkit-linear-gradient(left, #ffebd6, #ffd8e7);
  }
  span{
    font-size: 0.25rem;
    color: rgb(170, 138, 138);
  }
}
.showoff{
  .afterQuestionShowoff{
    position: absolute;
    font-size: 0;
    width: 80%;
    left: 10%;
    top: 45%;
    transform: translateY(-50%);
  }
  .btnX{
    position: absolute;
    right: 10%;
    transform: translateY(-110%);
    img{
      width: 60%;
    }
  }
}
.showoff{
  position: absolute;
  top: 0;
  left: 0;
  // z-index: 9999;
  background: rgba(0,0,0,0.5);
  width: 100%;
  height:100%;
}
.back_icon{
  z-index:0;
}
.weChatBg{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index:9999;
  img{
    width:90%;
    display: block;
    margin: 0 auto;
  }
}
.myFrinendsWrap li {
  height: 0.8rem;
}

</style>
